<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="navbar">
	<div class="navbar-inner">
		<div class="navbar-container">
			<!-- Navbar Barnd -->
			<div class="navbar-header pull-left">
				<a href="javascript:void(0);" class="navbar-brand">
					<font style="font-size: 40px;line-height: 40px;margin-left: 20px;">CMS</font>
				</a>
			</div>
			<!-- /Navbar Barnd -->
			<!-- Sidebar Collapse -->
			<div class="sidebar-collapse" id="sidebar-collapse">
				<i class="collapse-icon fa fa-bars"></i>
			</div>
			<!-- /Sidebar Collapse -->
			<!-- Account Area and Settings --->
			<div class="navbar-header pull-right">
				<div class="navbar-account">
					<ul class="account-area">
						<li>
							<a class=" dropdown-toggle" data-toggle="dropdown" title="Help" href="#">
								<i class="icon fa fa-warning"></i>
							</a>
							<!--Notification Dropdown-->
							<ul class="pull-right dropdown-menu dropdown-arrow dropdown-notifications">
								<li>
									<a href="#">
										<div class="clearfix">
											<div class="notification-icon">
												<i class="fa fa-phone bg-themeprimary white"></i>
											</div>
											<div class="notification-body">
												<span class="title">Skype meeting with Patty</span>
												<span class="description">01:00 pm</span>
											</div>
											<div class="notification-extra">
												<i class="fa fa-clock-o themeprimary"></i>
												<span class="description">office</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="clearfix">
											<div class="notification-icon">
												<i class="fa fa-check bg-darkorange white"></i>
											</div>
											<div class="notification-body">
												<span class="title">Uncharted break</span>
												<span class="description">03:30 pm - 05:15 pm</span>
											</div>
											<div class="notification-extra">
												<i class="fa fa-clock-o darkorange"></i>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="clearfix">
											<div class="notification-icon">
												<i class="fa fa-gift bg-warning white"></i>
											</div>
											<div class="notification-body">
												<span class="title">Kate birthday party</span>
												<span class="description">08:30 pm</span>
											</div>
											<div class="notification-extra">
												<i class="fa fa-calendar warning"></i>
												<i class="fa fa-clock-o warning"></i>
												<span class="description">at home</span>
											</div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="clearfix">
											<div class="notification-icon">
												<i class="fa fa-glass bg-success white"></i>
											</div>
											<div class="notification-body">
												<span class="title">Dinner with friends</span>
												<span class="description">10:30 pm</span>
											</div>
										</div>
									</a>
								</li>
								<li class="dropdown-footer ">
									<span> Today, March 28 </span>
									<span class="pull-right">
										10°c
										<i class="wi wi-cloudy"></i>
									</span>
								</li>
							</ul>
							<!--/Notification Dropdown-->
						</li>
						<li>
							<a class="wave in dropdown-toggle" data-toggle="dropdown" title="Help" href="#">
								<i class="icon fa fa-envelope"></i>
								<span class="badge">3</span>
							</a>
							<!--Messages Dropdown-->
							<ul class="pull-right dropdown-menu dropdown-arrow dropdown-messages">
								<li>
									<a href="#">
										<img src="${ctx}/static/beyond/img/avatars/divyia.jpg" class="message-avatar" alt="Divyia Austin">
										<div class="message">
											<span class="message-sender"> Divyia Austin </span>
											<span class="message-time"> 2 minutes ago </span>
											<span class="message-subject"> Here's the recipe for apple pie </span>
											<span class="message-body"> to identify the sending application when the senders image is shown for the main icon </span>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="${ctx}/static/beyond/img/avatars/bing.png" class="message-avatar" alt="Microsoft Bing">
										<div class="message">
											<span class="message-sender"> Bing.com </span>
											<span class="message-time"> Yesterday </span>
											<span class="message-subject"> Bing Newsletter: The January Issue‏ </span>
											<span class="message-body"> Discover new music just in time for the Grammy® Awards. </span>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<img src="${ctx}/static/beyond/img/avatars/adam-jansen.jpg" class="message-avatar" alt="Divyia Austin">
										<div class="message">
											<span class="message-sender"> Nicolas </span>
											<span class="message-time"> Friday, September 22 </span>
											<span class="message-subject"> New 4K Cameras </span>
											<span class="message-body"> The 4K revolution has come over the horizon and is reaching the general populous </span>
										</div>
									</a>
								</li>
							</ul>
							<!--/Messages Dropdown-->
						</li>
						<li>
							<a class="dropdown-toggle" data-toggle="dropdown" title="Tasks" href="#">
								<i class="icon fa fa-tasks"></i>
								<span class="badge">4</span>
							</a>
							<!--Tasks Dropdown-->
							<ul class="pull-right dropdown-menu dropdown-tasks dropdown-arrow ">
								<li class="dropdown-header bordered-darkorange">
									<i class="fa fa-tasks"></i>
									4 Tasks In Progress
								</li>
								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Account Creation</span>
											<span class="pull-right">65%</span>
										</div>
										<div class="progress progress-xs">
											<div style="width:65%" class="progress-bar"></div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Profile Data</span>
											<span class="pull-right">35%</span>
										</div>
										<div class="progress progress-xs">
											<div style="width:35%" class="progress-bar progress-bar-success"></div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Updating Resume</span>
											<span class="pull-right">75%</span>
										</div>
										<div class="progress progress-xs">
											<div style="width:75%" class="progress-bar progress-bar-darkorange"></div>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="clearfix">
											<span class="pull-left">Adding Contacts</span>
											<span class="pull-right">10%</span>
										</div>
										<div class="progress progress-xs">
											<div style="width:10%" class="progress-bar progress-bar-warning"></div>
										</div>
									</a>
								</li>
								<li class="dropdown-footer">
									<a href="#"> See All Tasks </a>
									<button class="btn btn-xs btn-default shiny darkorange icon-only pull-right">
										<i class="fa fa-check"></i>
									</button>
								</li>
							</ul>
							<!--/Tasks Dropdown-->
						</li>
						<li>
							<a class="login-area dropdown-toggle" data-toggle="dropdown">
								<div class="avatar" title="View your public profile">
									<img src="${ctx}/static/beyond/img/avatars/adam-jansen.jpg">
								</div>
								<section>
									<h2>
										<span class="profile">
											<span>David Stevenson</span>
										</span>
									</h2>
								</section>
							</a>
							<!--Login Area Dropdown-->
							<ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
								<li class="username">
									<a>David Stevenson</a>
								</li>
								<li class="email">
									<a>David.Stevenson@live.com</a>
								</li>
								<!--Avatar Area-->
								<li>
									<div class="avatar-area">
										<img src="${ctx}/static/beyond/img/avatars/adam-jansen.jpg" class="avatar">
										<span class="caption">Change Photo</span>
									</div>
								</li>
								<!--Avatar Area-->
								<li class="edit">
									<a href="profile.html" class="pull-left">Profile</a>
									<a href="#" class="pull-right">Setting</a>
								</li>
								<!--Theme Selector Area-->
								<li class="theme-area">
									<ul class="colorpicker" id="skin-changer">
										<li>
											<a class="colorpick-btn" href="javascript:void(0);" style="background-color:#5DB2FF;" rel="${ctx}/static/beyond/css/skins/blue.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0);" style="background-color:#2dc3e8;" rel="${ctx}/static/beyond/css/skins/azure.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0);" style="background-color:#03B3B2;" rel="${ctx}/static/beyond/css/skins/teal.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0);" style="background-color:#53a93f;" rel="${ctx}/static/beyond/css/skins/green.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0);" style="background-color:#FF8F32;" rel="${ctx}/static/beyond/css/skins/orange.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0);" style="background-color:#cc324b;" rel="${ctx}/static/beyond/css/skins/pink.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="javascript:void(0);" style="background-color:#AC193D;" rel="${ctx}/static/beyond/css/skins/darkred.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="#" style="background-color:#8C0095;" rel="${ctx}/static/beyond/css/skins/purple.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="#" style="background-color:#0072C6;" rel="${ctx}/static/beyond/css/skins/darkblue.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="#" style="background-color:#585858;" rel="${ctx}/static/beyond/css/skins/gray.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="#" style="background-color:#474544;" rel="${ctx}/static/beyond/css/skins/black.min.css"></a>
										</li>
										<li>
											<a class="colorpick-btn" href="#" style="background-color:#001940;" rel="${ctx}/static/beyond/css/skins/deepblue.min.css"></a>
										</li>
									</ul>
								</li>
								<!--/Theme Selector Area-->
								<li class="dropdown-footer">
									<a href="logout"> Sign out </a>
								</li>
							</ul>
							<!--/Login Area Dropdown-->
						</li>
						<!-- /Account Area -->
						<!--Note: notice that setting div must start right after account area list.
                            no space must be between these elements-->
						<!-- Settings -->
					</ul>
					<div class="setting">
						<a id="btn-setting" title="Setting" href="#">
							<i class="icon glyphicon glyphicon-cog"></i>
						</a>
					</div>
					<div class="setting-container">
						<label>
							<input type="checkbox" id="checkbox_fixednavbar">
							<span class="text">固定导航栏</span>
						</label>
						<label>
							<input type="checkbox" id="checkbox_fixedsidebar">
							<span class="text">固定菜单栏</span>
						</label>
						<label>
							<input type="checkbox" id="checkbox_fixedbreadcrumbs">
							<span class="text">固定路径栏</span>
						</label>
						<label>
							<input type="checkbox" id="checkbox_fixedheader">
							<span class="text">固定标题栏</span>
						</label>
					</div>
					<!-- Settings -->
				</div>
			</div>
			<!-- /Account Area and Settings -->
		</div>
	</div>
</div>
